<template>
    <div>
        <!--叶子级菜单-->
        <template v-if="!item.childMenu || item.childMenu.length===0">
            <el-menu-item :key="item.id" :index="''+item.id">
                <i :class="item.menuIcon"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
        </template>

        <!--非叶子菜单-->
        <el-submenu v-else :index="''+item.id">
            <template slot="title">
                <i :class="item.menuIcon"></i>
                <span>{{item.menuName}}</span>
            </template>

            <template v-for="child in item.childMenu">
                <!--       这里调用的递归，当child的children不为空时，调用递归         -->
                <menu-template v-if="child.childMenu && child.childMenu.length!=0" :key="''+child.id" :item="child"></menu-template>

                <el-menu-item-group v-else>
                    <el-menu-item :index="''+child.id"><i :class="child.menuIcon"></i>{{child.menuName}}</el-menu-item>
                </el-menu-item-group>
            </template>

        </el-submenu>
    </div>
</template>

<script>
    export default {
        name: "MenuTemplate",
        props: {
            item: {
                type: Object,
                required: true
            }
        }
    }
</script>

<style scoped>

    /*隐藏文字*/
    .el-menu--collapse  .el-submenu__title span{
        display: none;
    }

    /*隐藏 > */
    .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow {
        display: none;
    }
</style>